<template>
	<view class="bosss">
		<!-- <u-sticky> -->
		<view class="duantopbox">
			


			
		</view>
		<view class="dingbudebox">
			<image @click="fanhiskan" class="dingbudefanhui" src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisefanhui.png" mode=""></image>
			<!-- <view class="dingbijiji">
				第{{kanji}}集
			</view> -->
		
		</view>
		<!-- </u-sticky> -->


		<!-- <view class="seipBox">
			<u-swiper title="true" indicator-pos="bottomLeft" :effect3d="!true" :list="headerInfo"></u-swiper>
		</view> -->





		<view class="remenmbox">
			<!-- <u-section title="都市言情" :show-line="false" :right="false"></u-section> -->
			<view class="remenju">
				<view @click="oanksnd(item)" v-for="(item,index) in kanjuingo" :key="index" class="rejubox">
					<view class="">
						<view class="rejuimg">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="rejunianme">
							<!-- {{item.title}} -->
							<!-- {{item.title}} -->
							{{ item.title.length > 6 ? item.title.substring(0, 6) + '..' : item.title }}
							<!-- {{item.title.length>6?item.title.substring(0, 6)+'..':item.title}} -->
						</view>
					</view>
					
					

				</view>

			</view>
		</view>


		<!-- <u-divider>到底了</u-divider> -->






	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import api from '../../utils/url.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				tuiainxi: 5,
				fenlei: ["全部", "都市言情", '都市生活', '穿越时间', '男生爱看', '女生最爱', '古装情感', '情感剧场'],
				seleidd: 0,
				kanjuingo: "",
				page: 1,

			}
		},
		computed: {
			...mapState({

			})
		},
		components: {

		},
		onLoad() {
			var that = this
			that.playletlists()



		},
		onShow() {
			var that = this


		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onReachBottom() {
			// console.log('触底');
			// this.page++
			// this.playletlists()


		},
		methods: {
			fanhiskan(){
				uni.navigateBack({
					delta: 1
				})
			},
			oanksnd(i) {
				uni.navigateTo({
					url: "/jingqu/kanju/kanju?id=" + i.id 
					// + "&id=item_id" + i.item_id
				})
				
			},
			clickSeracktype(e) {
				this.seleidd = e
			},
			goserachpage() {
				// console.log('触底');
				uni.navigateTo({
					url: "/jingqu/search/search"
				})
			},
			playletlists() {
				var that = this
				let data = {
					// page: this.page
				}
				request(api.memberhistory, 'GET', data)
					.then(response => {
						console.log('kanjuingo数据:', response.data);
						
						if (response.code == "200") {
							this.kanjuingo = response.data.data
							
							// // {{ item.title.length > 6 ? item.title.substring(0, 6) + '..' : item.title }}
							
							// for (let key in this.kanjuingo) {
							//   if (obj.hasOwnProperty(key)) { // 检查是否是对象自身的属性
							//     console.log(key, obj[key]);
							//   }
							// }
							
							
							console.log('kanjuingo:', this.kanjuingo);
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.duantopbox {
		width: 100%;
		background-color: #dff9ed;
	}

	.serachbox {
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
	}

	.sergorup {
		width: 94%;
		margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
		background-color: white;
		border-radius: 50rpx;
		height: 60rpx;
	}

	.searLeft {
		width: 15%;
	}

	.searLeft image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;

	}

	.searrihgt {
		width: 75%;
	}

	.searrihgt input {
		// border: 1px solid red;
		width: 400rpx;
	}

	.erjizi {
		width: 20%;

	}

	.erjizi image {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
		display: block;
	}

	.huiyuanka {
		width: 96%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}

	.feqqr {
		width: 150rpx;
		// margin-top: 15rpx;
		// height: 670rpx;
		padding: 5rpx 5rpx;
		// display: inline-flex;

		background-color: #eee;
		color: #909090;
		border-radius: 50rpx;
		margin-left: 30rpx;
		text-align: center;
		// border: 5rpx solid #fff;
		border: 5rpx solid #dff9ed;

	}

	.selfeqqr {
		// margin-top: 15rpx;
		width: 150rpx;
		padding: 5rpx 5rpx;
		// display: inline-flex;
		text-align: center;
		background-color: #7dd8b5;
		color: #fff;
		border-radius: 50rpx;
		// border-left: 35rpx solid #dff9ed;
		margin-left: 30rpx;
	}

	.seipBox {
		width: 94%;
		margin-left: 3%;
		padding: 10rpx 0;
		background-color: #fff;
	}

	.selebig {
		width: 94%;
		margin-left: 3%;
	}


	.swipimg {
		width: 100%;
		height: 300rpx;
		border-radius: 30rpx;
	}

	.tuijianlei {
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
	}

	.tuijainbox {
		width: 20%;
	}

	.tuijianimgbox image {
		width: 80rpx;
		height: 80rpx;
		display: block;
		margin: 0rpx auto;
	}

	.tuijaintitle {
		color: #000;
		text-align: center;
		margin-top: 15rpx;
	}

	.remenju {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
	}

	.rejubox {
		width: 33%;
		margin-top: 10rpx;
	}

	.rejuimg image {
		width: 200rpx;
		height: 300rpx;
		display: block;
		margin: 0rpx auto;
		border-radius: 20rpx;
	}

	.rejunianme {
		color: #000;
		text-align: center;
		margin-top: 15rpx;
		height: 45rpx;
	}

	.remntiele {
		width: 100%;
		// margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
	}

	.remne {
		font-size: 34rpx;
		font-weight: bold;
	}

	.remenmbox {
		width: 94%;
		margin-top: 30rpx;
		margin-left: 3%;
	}
	.dingbudebox{
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
		background-color: #5199FE;
		// position: fixed;
		// top: 0;
		// z-index: 9999;
		.dingbudefanhui{
			width: 40rpx;
			height: 40rpx;
			margin-left: 40rpx;
		}
		.dingbijiji{
			color: white;
			margin-left: 20rpx;
		}
	}
</style>